<template>
  <div class="chat-input">
    <div class="chat-toolbar">
      <el-tooltip content="文件发送" placement="top">
        <div class="i-svg:filetrans toolbar-icon" @click="triggerFileUpload"></div>
      </el-tooltip>
      <input ref="fileInput" type="file" style="display: none" @change="handleFileUpload" />
    </div>
    <div class="chat-input-area">
      <el-input
        v-model="localInput"
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        @keyup.enter.native="onSend"
      />
      <el-button type="primary" class="send-btn" @click="onSend">发送</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  input: String,
});
const emit = defineEmits(["update:input", "sendMessage", "sendFile"]);
const localInput = ref(props.input);
const fileInput = ref(null);

watch(
  () => props.input,
  (v) => (localInput.value = v)
);
watch(localInput, (v) => emit("update:input", v));

function onSend() {
  emit("sendMessage");
}

function triggerFileUpload() {
  fileInput.value.click();
}

function handleFileUpload(event) {
  const file = event.target.files[0];
  if (file) {
    emit("sendFile", file);
    // 清空文件选择，以便可以再次选择同一文件
    event.target.value = "";
  }
}
</script>
<style scoped>
.chat-input {
  min-height: 200px;
}
.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  background: #fff;
  border-top: 1px solid #eee;
}
.toolbar-icon {
  font-size: 22px;
  cursor: pointer;
  transition: color 0.2s;
}
.toolbar-icon:hover {
  color: #5c6bc0;
}
.chat-input-area {
  display: flex;
  align-items: flex-end;
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid #eee;
}
.send-btn {
  margin-left: 10px;
  align-self: flex-end;
}
</style>
